window.addEventListener("load", function () {
	// 功能一 :海量API ,移入移出
	const liNodes = document.querySelectorAll("#api ul li");
	liNodes.forEach(function (v, i) {
		v.addEventListener("mouseover", function (e) {
			v.firstElementChild.src = `../imgs/api0${i + 1}-c.svg`;
			v.style.backgroundColor = "#2f7ee9";
			v.style.color = "white";
		});
		v.addEventListener("mouseout", function (e) {
			v.firstElementChild.src = `../imgs/api0${i + 1}.svg`;
			v.style.backgroundColor = "white";
			v.style.color = "black";
		});
	});
	/**
	 * // 功能一：海量API区移入移出交互
	// 思路：
	// 1.获取相关节点
	// $("#apiList li");
	// 2.给li绑定移入和移出事件
	let oldUrl = ""; // 变量提升
	$("#apiList li").forEach(function (v) {
		// 2-1.移入事件
		v.addEventListener("mouseover", function () {
			// 2-1-1.背景色蓝色
			this.style.backgroundColor = "#2f7ee9";
			// 2-1-2.文字变白
			this.style.color = "#fff";
			// 2-1-3.切换为透明的图片
			// 将图片的后缀名前加一个-c，api01.svg => api01-c.svg
			let imgUrl = this.firstElementChild.src;
			// let str = imgUrl.slice(imgUrl.lastIndexOf(".")); // 动态获取后缀名
			this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg"); // 直接写死后缀名进行替换
			oldUrl = imgUrl; // 用一个变量保存原先的路径
		});
		// 3-1.移出事件
		v.addEventListener("mouseout", function () {
			// 3-1-1.背景色变白
			this.style.backgroundColor = "#fff";
			// 3-1-2.文字变黑
			this.style.color = "#000";
			// 3-1-3.切换为原先的图片
			this.firstElementChild.src = oldUrl;
		});
	});
	 */

	// 功能二：独角兽区轮播图
	// 思路：将多个图文结构unicornCont全部叠在一个区域， 每隔3s让其他一个显示，其他不显示
	// 1.获取相关节点
	const unicornConts = $(".unicornCont");
	unicornConts[0].style.opacity = "1"; // 默认显示第0个
	let index = 1;
	// 2.设置周期定时器每隔3秒显示
	this.window.setInterval(function () {
		// 3.排他思想，不管当前谁显示，每一个周期都先让所有消失
		unicornConts.forEach(function (v) {
			v.style.opacity = "0";
		});
		// 4.通过索引显示对应内容，其他不显示
		unicornConts[index].style.opacity = "1";
		// 5.设置索引变量，每隔一个周期就++
		index++;
		// 6.当索引达到最大限度时要回复初始状态
		if (index > unicornConts.length - 1) {
			index = 0;
		}
	}, 3000);

	//
	// 功能三:回到顶部
	// 获取相关节点
	const divNode = document.querySelector("#backtop");
	// window.onscroll
	// 1.当滚动条到大于300px位置时显示出来,小于300px位置时隐藏
	window.addEventListener("scroll", function () {
		// console.log("滚动", window.scrollY);
		if (window.scrollY > 300) {
			divNode.style.transition = "opacity 1s";
			divNode.style.opacity = 1;
		} else {
			divNode.style.opacity = 0;
		}
	});

	// 回到顶部
	divNode.addEventListener("click", function () {
		scrollTo({
			left: 0,
			top: 0,
			behavior: "smooth",
		});
	});

	// swiper插件
	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});

	//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	new Swiper(".swiper");
	var mySwiper = document.querySelector(".swiper").swiper;
	mySwiper.slideNext();
});
